<script lang="ts" setup>
import { useFollow } from '@/composable/index'

const props = defineProps<{
  item: any
}>()

// 因为封装了hoosk类似与封装函数，有两个值我们hooks里面没有， id 和type，需要从外面传递进去
// 类似与之前 const router = userRouter()
// 类似于@vueuse/core  const {width, height} = useWindowSize()
const { loading, follow } = useFollow({ type: 'doc', item: props.item })

// const loading = ref(false)
// type类型 topic百科话题,knowledge百科文章,doc医生,disease疾病
const follow1 = async () => {
  // try {
  //   loading.value = true
  //   await likeRequest({
  //     // 这个接口是关注与取消关注都会掉的接口，应该向后端java提一下，添加一个参数，传0 1
  //     // 不然不知道当前是关注了还是没有关注，有歧义。和后端沟通
  //     type: 'doc',
  //     id: props.item.id
  //   })
  //   loading.value = false
  //   showToast(props.item.likeFlag === 1 ? '取消关注成功' : '关注成功')
  //   if (props.item.likeFlag === 1) {
  //     // 已关注的分支
  //     // eslint-disable-next-line vue/no-mutating-props
  //     props.item.likeFlag = 0
  //   } else {
  //     // 未关注的分支
  //     // eslint-disable-next-line vue/no-mutating-props
  //     props.item.likeFlag = 1
  //   }
  // } catch (error) {
  //   loading.value = false
  // }
  // 请求成功以后，将item对象里面的属性likeFlag，手动修改为已关注1
  // props.item.likeFlag = 1
  // item父组件传递过来的数据，只能父组件自己改自己的数据，
  // 但是js的底层 针对与对象来说，只有地址的改变才叫改变，对象里面的属性的改变不叫改变
  // 如果是传递的普通数据类型， 绝对改了报错
  // 入股传递的是复杂数据类型，在自己能控制的情况下，可以在子组件修改父组件 对象的某一些属性
  // props.item = {} 对于复杂数据类型这样的修改，改了地址，vue才认为你子组件修改了父组件的数据
  // props.item.xxxx= xxx 这样改对象的某一个属性，不叫修改，vue会让我们通过，也不会报错，因为这是js的底层原理，和vue2 3没关系
}

// defineProps({
//   item: {
//     type: Object
//   }
// })
</script>

<template>
  <div class="doctor-card">
    <van-image round :src="item.avatar" />
    <p class="name">{{ item.name }}</p>
    <p class="van-ellipsis">{{ item.hospitalName }} {{ item.depName }}</p>
    <p>{{ item.positionalTitles }}</p>
    <van-button
      round
      size="small"
      :loading="loading"
      :type="item.likeFlag === 1 ? 'default' : 'primary'"
      @click="follow"
      >{{ item.likeFlag === 1 ? '已关注' : '+ 关注' }}</van-button
    >
  </div>
</template>

<style scoped lang="scss">
.doctor-card {
  width: 135px;
  height: 190px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 0px 11px 0px rgba(229, 229, 229, 0.2);
  text-align: center;
  padding: 15px;
  margin-left: 15px;
  display: inline-block;
  box-sizing: border-box;
  > .van-image {
    width: 58px;
    height: 58px;
    vertical-align: top;
    border-radius: 50%;
    margin: 0 auto 8px;
  }
  // css选择  + > ~
  > p {
    margin-bottom: 0;
    margin-top: 0;
    font-size: 11px;
    color: var(--cp-tip);
    &.name {
      font-size: 13px;
      color: var(--cp-text1);
      margin-bottom: 5px;
    }
  }
  > .van-button {
    padding: 0 12px;
    height: 28px;
    margin-top: 8px;
    width: 72px;
  }
}
</style>
